import 'package:flutter/material.dart';
//首页  高亮  搜索
enum SearchBarType { home, normal, homeLight }

class SearchBar extends StatefulWidget {
  //是否禁止搜索
  final bool? abled;
  //左边按钮是否隐藏
  final bool? hideletf;
  final SearchBarType searchBartype;
  //默认的提示文案
  final String? hint;
  final String? defaultText;
  //左边按钮的点击回调
  final void Function()? leftButtonClick;
  //右边按钮的点击回调
  final void Function()? rightButtonClick;
  //语音按钮的点击回调
  final void Function()? speakClick;
  //输入框的回调
  final void Function()? inputBoxClick;
  //内容变化的回调
  final ValueChanged<String>? onChanged;

  const SearchBar(
      {Key? key,
        this.abled = true,
        this.hideletf,
        this.searchBartype = SearchBarType.normal,
        this.hint,
        this.defaultText,
        this.leftButtonClick,
        this.rightButtonClick,
        this.speakClick,
        this.inputBoxClick,
        this.onChanged})
      : super(key: key);

  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<SearchBar> {
  //是否显示清空按钮
  bool showClear = false;
  //动态获取搜索框里面的文字变化
  final TextEditingController _contr = TextEditingController();

  @override
  void initState() {
    if (widget.defaultText != null) {
      setState(() {
        _contr.text = widget.defaultText!;
      });
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //根据搜索框不同的类型 设置不同的样式
    return widget.searchBartype == SearchBarType.normal ? _NormalSearch() : _HomeSearch();
  }

  _NormalSearch() {
    return Container(
      child: Row(children: <Widget>[
        //左边的部分点击时间回调
        _Tap(
            Container(
              padding: const EdgeInsets.fromLTRB(6, 5, 10, 5),
              child: widget.hideletf ?? false ? null : const Icon(
                Icons.arrow_back_ios,
                color: Colors.grey,
                size: 26,
              ),
            ),
            widget.leftButtonClick
        ),
        //输入框
        Expanded(
          flex: 1,
          child: _input(),
        ),
        _Tap(
          //右边的搜索按钮
            Container(
              padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
              child: const Text(
                '搜索',
                style: TextStyle(color: Colors.blue, fontSize: 17),
              ),
            ),
            widget.rightButtonClick)
      ]),
    );
  }

  _HomeSearch() {
    return Container(
      color: Colors.black12,
      child: Row(children: <Widget>[
        _Tap(
            Container(
                padding: EdgeInsets.fromLTRB(6, 5, 5, 5),
                child: Row(
                  children: <Widget>[
                    Text(
                      '上海',
                      style: TextStyle(color: _homeColor(), fontSize: 14),
                    ),
                    Icon(
                      Icons.expand_more,
                      color: _homeColor(),
                      size: 22,
                    )
                  ],
                )),
            widget.leftButtonClick),
        Expanded(
          flex: 1,
          child: _input(),
        ),
        _Tap(
            Container(
              padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
              child: Icon(
                Icons.comment,
                color: _homeColor(),
                size: 26,
              ),
            ),
            widget.rightButtonClick)
      ]),
    );
  }

  //搜索框
  _input() {
    //搜索框的颜色
    Color inputBoxColor;
    //如果在首页状态下颜色设置为白色
    if (widget.searchBartype == SearchBarType.home) {
      inputBoxColor = Colors.white;
    } else {
      inputBoxColor = Color(int.parse('0xffEDEDED'));
    }
    return Container(
      height: 30,
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
      decoration: BoxDecoration(
          color: inputBoxColor,
          borderRadius: BorderRadius.circular(
              widget.searchBartype == SearchBarType.normal ? 5 : 15)),
      child: Row(
        children: <Widget>[
          //左边的搜索图标
          Icon(
            Icons.search,
            size: 20,
            color: widget.searchBartype == SearchBarType.normal ? Color(0xffA9A9A9) : Colors.blue,
          ),
          //搜索框
          Expanded(
              flex: 1,
              child: widget.searchBartype == SearchBarType.normal ? TextField(
                  controller: _contr,
                  //onChanged 清除按钮
                  onChanged: _onChang,
                  autofocus: true,
                  style: const TextStyle(
                      fontSize: 18.0,
                      color: Colors.black,
                      fontWeight: FontWeight.w300),
                  //输入文本的样式
                  decoration: InputDecoration(
                    contentPadding:
                    //flutter sdk >= v1.12.1 输入框样式适配
                    const EdgeInsets.only(left: 5, bottom: 15, right: 5),
                    border: InputBorder.none,
                    hintText: widget.hint ?? '',
                    hintStyle: const TextStyle(fontSize: 15),
                  ))
                  : _Tap(
                  Text(
                    widget.defaultText ?? "",
                    style: const TextStyle(fontSize: 13, color: Colors.grey),
                  ),
                  //回调
                  widget.inputBoxClick
              )
          ),
          !showClear
              ? _Tap(
              Icon(
                Icons.mic,
                size: 22,
                color: widget.searchBartype == SearchBarType.normal
                    ? Colors.blue
                    : Colors.grey,
              ),
              //清除按钮
              widget.speakClick)
              : _Tap(
              const Icon(
                Icons.clear,
                size: 22,
                color: Colors.grey,
              ), () {
            setState(() {
              //清空输入框
              _contr.clear();
            });
            //同时触发onChange
            _onChang('');
          })
        ],
      ),
    );
  }

  //
  _Tap(Widget? child, void Function()? callback) {
    return GestureDetector(
      onTap: () {
        if (callback != null){
          callback();
        }
      },
      child: child,
    );
  }

  //将输入框的状态来进行清零
  _onChang(String text) {
    if (text.length > 0) {
      //通过state 的true 和false 是否显示清除
      setState(() {
        showClear = true;
      });
    } else {
      setState(() {
        showClear = false;
      });
    }
    if (widget.onChanged != null) {
      widget.onChanged!(text);
    }
  }
    //主页滑动改变 输入框的颜色
  _homeColor() {
    return widget.searchBartype == SearchBarType.homeLight ? Colors.black38 : Colors.white30;
  }
}
